<template>
  <!-- 救援金 -->
  <div class="information-content-h5">
    <h1 class="information-content-h5__title">
      <h3 @click="goBack"><i-teenyicons-arrow-left-solid /> {{ title }}</h3>
      <h4 @click="openFilter"><i-tabler-filter-edit />{{ t("RescueFund.text13") }}</h4>
    </h1>
    <ul class="information-content-h5__list" v-if="list.length > 0">
      <li v-for="item in list" :key="item.id">
        <h3>
          <em><img :src="piniaUserinfo.queryCurrencyInfo(item.currencyId)" alt=""></em>
          <span>+{{ Number(item.discountAmount).toFixed(2) }}</span>
          <div class="unreceived" v-if="item.status === 1" @click="receive(item)">{{ stausFuc(item.status) }}</div>
          <div class="received" v-else >{{ stausFuc(item.status) }}</div>
        </h3>
        <h4>
          <span class="information-l">{{ t('RescueFund.text8') }}: </span><span>{{ item.joinId }}</span>
          <span class="information-r">{{ parseTime(item.activityJoinTime) }}</span>
        </h4>
      </li>
    </ul>
    <div class="h5-no-data" v-else>{{ t('BetRecord.Nocontent') }}</div>
    <!-- 过滤框 -->
    <van-popup
      v-model:show="showBottom"
      position="bottom"
      class="mine-h5-popup"
    >
      <el-form :model="form" ref="passwordFormRef" class="mine-h5-popup-content" size="small">
        <el-form-item prop="number">
          <el-input v-model="form.number" :placeholder="t('RescueFund.text7')" />
        </el-form-item>
        <el-form-item prop="type">
          <ZH5Radio v-model:navs="navs" v-model:active="active" v-model:value="form.type"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="h5-popup-search-button" @click="search">{{t('BetRecord.Search')}}</el-button>
        </el-form-item>
      </el-form>
    </van-popup>
  </div>
</template>

<script setup lang="ts" name="RescueFunds">
import recordApi from '@/api/modules/record';
import userinfo from '@/store/userinfo';
import { getEnumValue, getEnumOptions } from '@/utils/enums';
import { parseTime } from '@/utils/format';

const { t } = useI18n();
const emits = defineEmits(['back']);
const piniaUserinfo: any = userinfo();

const props = defineProps({
  title: {
    type: String,
    default: ""
  }
});

const data:any = reactive({
  showBottom: false,
  form: {},
  navs: getEnumOptions('rescueFundsStatus'),
  active: '',
  list: [],
  unclaimed: [],
  unreceived: -1, //是否有待领取的状态标识符
});

const {
  showBottom,
  form,
  navs,
  active,
  list,
  unclaimed,
  unreceived,
} = toRefs(data);

// 顶顶顶----
const openFilter = () => {
  showBottom.value = true;
}

// 搜索
const search = () => {
  showBottom.value = false;
  recordApi.getJoinRescue({
    ...form.value
  }).then((response:any)=>{
    if(response.code === 200){
      list.value = response.data || [];
      unclaimed.value = response.data.filter((item:any) => item.status == 1)
      if (unclaimed.value.length > 0) {
        unreceived.value = 1
      } else {
        unreceived.value = -1
      }
    }
  });
}
search();

// 领取
const receive = (item:any) => {
  recordApi.addJoinRescue({
    joinId: item.joinId
  }).then((response:any) => {
    if (response.code == 200) {
      search();
    }
  })
}

const stausFuc = (status:any) => {
  switch (status) {
    case 1:
      return t("Activity.status0")
    case 2:
      return t("Activity.status1")
  }
}

const goBack = () => {
  emits('back');
}
</script>

<style lang="scss" scoped>
@import url(./index.scss);
</style>
